<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div style="width: 500px;height: 200px;margin: 0 auto; margin-top: 500px; border-radius: 10px; background: #1e45c9">
        <div style="text-align: center">
            <form>
                <div>
                    <label>用户名</label>
                    <div>
                        <input type="text" v-model="user.userName"/>
                    </div>
                    <label>密码</label>
                    <div>
                        <input type="text" v-model="user.userPassword"/>
                    </div>
                    <label>权限</label>
                    <div>
                        <input type="text" v-model="user.userStatus"/>
                    </div>
                    <div>
                        <button type="button" @click="add()">添加</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            user:{},
        },
        methods:{
            add(){
                axios.post("http://localhost:9090/user/add",this.user).then((res)=>{
                    if (res.data){
                        alert("添加成功");
                        this.user = {};
                    } else {
                        alert("添加失败")
                    }
                })
            }
        }
    })
</script>
</body>
</html>